<template>
    <div class="pie-chart">
        <el-card>
            <template #header>
                <div class="card-box">
                    <div class="card-header">事件统计情况</div>
                    <div class="btn">
                        <el-button type="danger"  style="height:25px;width:30px" @click="$emits('close')">x</el-button>
                    </div>
                </div>
            </template>
            <div class="chart" style="width:450px;height:450px">
                <v-chart :option="option"></v-chart>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    pieValue: {
        type: Object,
    },
    pieShow: {
        type: Boolean,
        default: false
    }
})
const $emits = defineEmits(["close"]);
const { pieValue } = props;
const option = ref({
    legend: {
        orient: 'vertical',
        left: 'left',

    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            name: '事件类型',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [{
                value: 20,
                name: '碰撞'
            },
            {
                value: 14,
                name: '刮擦'
            },
            {
                value: 4,
                name: '其他'
            },
            {
                value: 6,
                name: '失火'
            }, {
                value: 7,
                name: '翻车'
            }, {
                value: 5,
                name: '碾压'
            }],
        }
    ]
});

const renderChart = () => {
    // 基于准备好的dom，初始化echarts实例
    var chart = echarts.init(document.querySelector('.chart'),);
    chart.setOption(option.value);
};
onMounted(async () => {
    await nextTick();
    renderChart()
});

</script>

<style lang="scss" scoped>
.pie-chart {
    z-index: 1000;
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);

    .card-box{
        display: flex;
    justify-content: space-between;
    }
        
    ::v-deep .el-card__body {
        height: 450px;
        width: 450px;


    }

    .chart {
        height: 100%;
    }
}
</style>
